import React, { Component } from 'react';
import { StereoHelper } from '../../stereoHelper';
import GraphLoader from './graphLoader';
import HopeBankLoader from './hopeBankLoader';
import ImgLoader from './imgLoader';
import LookersLoader from './lookersLoader';
import RedbagLoader from './redbagLoader';
import TextLoader from './textLoader';
import ThreedLoader from './threedLoader';
import VideoLoader from './videoLoader';
import ExtendGeometryLoader from './extendGeometryLoader';
import { THREE } from '../../../../../../utils/consts'

class WidgetLoader extends Component {
	componentWillMount() {
		const { widget } = this.props;
		this.rebuildWidgetData(widget);
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.widget !== this.props.widget) {
			this.rebuildWidgetData(nextProps.widget);
		}
	}

	rebuildWidgetData(widget) {
		this.stereoDatas = {...widget};
		StereoHelper.rebuildWidgetData(this.stereoDatas);
        StereoHelper.rebuildStereoData(this.stereoDatas);
        StereoHelper.rebuildThreedData(this.stereoDatas);
        StereoHelper.rebuildPositionData(this.stereoDatas);
        StereoHelper.addStereos([this.stereoDatas]);
	}

	getLoaderByWidgetType(resources, queryThreedState){
		switch(this.stereoDatas.stereoType) {
			case 'call':
			case 'download':
			case 'extend':
			case 'form':
			case 'link':
			case 'music':
			case 'nav':
			case 'nearBy':
				return (<ExtendGeometryLoader widget={this.stereoDatas} />)
			case 'graph':
				return (<GraphLoader widget={this.stereoDatas} />)
			case 'hopebank':
				return (<HopeBankLoader widget={this.stereoDatas} />)
			case 'img':
			case 'album':
				return (<ImgLoader widget={this.stereoDatas} />)
			case 'lookers':
				return (<LookersLoader widget={this.stereoDatas} />)
			case 'redbag':
				return (<RedbagLoader widget={this.stereoDatas} />)
			case 'text':
				return (<TextLoader widget={this.stereoDatas} />)
			case 'threed':
				return (<ThreedLoader widget={this.stereoDatas} resources={resources} queryThreedState={queryThreedState}/>)
			case 'video':
				return (<VideoLoader widget={this.stereoDatas} />)
			default:
				return (<div />)
		}
	}

    render() {
        const { widget, resources, queryThreedState } = this.props;
        return this.getLoaderByWidgetType(resources, queryThreedState)
    }
}

export default WidgetLoader;
